<template>
	<view>
		<view class="blogList">
			<view v-for="(item,index) in userBlog" :key='item.blog_id' class="blogList-item" @click="toBlog(item.blog_id)">
				<view class="blogList-item-img">
					<u-image width="100%" height="180rpx" :src="item.img" :fade="true" duration="500">
						<u-loading slot="loading"></u-loading>
					</u-image>
<!-- 					<u-lazy-load :height="140" :image="item.img">
					</u-lazy-load> -->
				</view>
				<view class="blogList-item-text">
					<view class="one u-line-2">
						{{item.title}}
					</view>
					<view class="two u-line-2">
						{{item.intro}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "userBlog",
		props: ['userBlog'],
		data() {
			return {

			};
		},
		methods:{
			toBlog(id){
				this.$emit('toBlog',id)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.blogList {
		width: 90%;
		margin: 0 auto;

		.blogList-item {
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin-bottom: 50rpx;


			.blogList-item-img {
				flex: 4.5;
				padding-right: 20rpx;
				
				// /deep/image {
				// 	width: 100%;
				// 	height: 130rpx;
				// }
			}

			.blogList-item-text {
				flex: 5.5;
				display: flex;
				flex-direction: column;
				justify-content: space-between;


				.one {
					font-weight: bold;
					font-size: 34rpx;
				}

				.two {
					color: #606266;
				}
			}
		}
	}
</style>
